<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        #root {
            width: 200px;
            height: 200px;
            background-color: palevioletred;
        }
    </style>
</head>

<body>
    <div id="root">
        123
    </div>
    <ul>
        <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
        <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
    </ul>
    <form action="http://www.baidu.com">
       用户名 <input type="text">
       <input type="submit" value="提交">
    </form>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol>
</body>
<script>
    /* 
        event就是事件对象
            div.onclick =function (event) {       console.log(event)  }
         
        事件对象只有有了事件才会存在  系统自动创建
        事件对象是事件的一系列相关数据的集合 跟事件相关
            比如onclick就包含了鼠标相关的信息(坐标..)
    */
    let div = document.querySelector('#root')
    // div.onclick = function (event) {
    //     // event就是事件对象
    //     console.log(event)
    // }
    /* 
    事件对象的常用属性和方法
        e.target 触发事件的对象
            target和this不一样
                target触发事件的对象
                this绑定事件的对象
        e.type 事件类型(不带on)
        e.preventDefault()阻止事件默认行为(比如 不让a链接跳转) 
        e.stopPropagation() 阻止事件冒泡

    */
    div.addEventListener('click', function (event) {
        console.log(event.target.innerHTML)
        console.log(event.type)

    })
    document.querySelector('a').addEventListener('click',function (e) {
        // console.log('a事件'+this.innerHTML)
        // e.preventDefault()
        return false
    })
    document.querySelector('input[type="submit"]').addEventListener('submit',function (e) {
        console.log('你好');
        // e.preventDefault()
        
    })
    document.querySelector('ol').children[2].addEventListener('click',function (e) {
        console.log('ol的'+this.innerHTML) 
        // e.stopPropagation() 
    })
    document.querySelector('ol').addEventListener('click',function () {
        console.log('ol')
    })
</script>

</html>